<template>
  <div class="content">
    <van-circle
      v-model:current-rate="timeCounter"
       @click="closeTimer"
      :color="{
        '0%': '#3fecff',
        '100%': '#6149f6',
      }"
      :clockwise="false"
      size="42px"
      class="my-timer"
      :text="`${Math.ceil(timeCounter / 20)}s`"
    />
    <h2>拼搏，创造奇迹</h2>
    <van-button v-show="newUser" class="button" round @click="wel"
      >立即体验</van-button
    >
  </div>
</template>
<script setup>
import { defineEmits , onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { autoLoginApi, userRoleApi } from "../../apis/loginApi";
import { commonDefinition } from "../../store";
import { deCodeApi, enCodeApi } from "../../utils";
const emit = defineEmits()
const timeCounter = ref(0);
const hasAutoLoginSuccess = ref(false); //免登录请求是否成功
const hasLogin = ref(true); // 免登录请求中
const router = useRouter();
const _timer = ref(0); //定时器对象
const newUser = ref(true); //是否为新用户

onMounted(function () {
  let userCache = localStorage.getItem("user-name");
  if (userCache) {
    newUser.value = false;
  }
  let autoCache = localStorage.getItem("auto-login");
  if (autoCache) {
    try {
      autoCache = deCodeApi(autoCache).split("---");
      //七天免登录
      let hasIn = 7 * 24 * 60 * 60 * 1000 - (Date.now() - autoCache[1]) > 0;
      if (hasIn) {
        // debugger
        commonDefinition().setToken(autoCache[0]);

        //缓存的动作就相当于注入token到请求头，因为ajax封装的时候，会实现拦截，自动注入token
        autoLoginApi().then(async (userInfo) => {
          if (userInfo.code == 200) {
            commonDefinition().setUserInfo(userInfo.data)
            let userRole = await userRoleApi(userInfo.data.role)
            commonDefinition().setUserRole(userRole.data)
            hasAutoLoginSuccess.value = true
             //免登录请求成功，并且将用户信息和权限都存储好了
          }
          // 请求完成以后，免登录请求结束
          hasLogin.value = false
        });
      } else {
        // 如果没有在有效期内，那么免登录请求直接结束
        hasLogin.value = false
      }
    } catch (error) {
      // 解密失败，那么免登录请求直接结束
      hasLogin.value = false
    }
  } else {
    // 获取autoCache失败
    hasLogin.value = false
  }

  _timer.value = setInterval(function () {
    timeCounter.value--
    if (timeCounter.value < 2) {
      clearInterval(_timer.value)
      if (hasAutoLoginSuccess.value) {
        router.push("/home")
      } else {
        emit("changePage")
      }
    }
  }, 1000 / 20)
});
// 没有登录信息时，显示按钮
function wel() {
  clearTimeout(_timer.value)
  emit("changePage")
}
/**
 * 页面面登录接口没有请求完成的情况下不能点击关闭欢迎页面
 * 如果免登录请求完成以后，免登录成功用户点击进入到首页，否则进入登录页面
 * 用户点击倒计时关闭欢迎页面以后，倒计时需要关闭
 */
function closeTimer() {
  if (hasLogin.value) return

  clearInterval(_timer.value)
  if (hasAutoLoginSuccess.value) {
    router.push("/home")
  } else {
    emit("changePage")
  }
}
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  background: url(../../images/wel.webp) no-repeat;
  background-size: 100% 100%;
  > .my-timer {
    position: absolute;
    top: 15px;
    right: 15px;
  }
  h2 {
    color: white;
    font-size: 38px;
    font-family: "宋体";
    position: fixed;
    top: 280px;
    left: 55px;
  }
  .button {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    position: fixed;
    top: 590px;
    left: 90px;
    width: 200px;
  }
}
</style>